.hamburge {
  position: relative;
  text-align: center;
  padding: .68rem .5rem;
  transition: all .25s;

  .hamburge:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.22);
    z-index: -1;
    transform: scale(0);
    border-radius: 50%;
    transition: all .25s;
  }

  .hamburge-line span {
    display: block;
    width: 1rem;
    height: .1rem;
    background: #333;
    transition: all .25s;
  }

  .hamburge-line span:nth-child(2) {
    margin: .2em 0;
  }

  .hamburge.hamburge-open {
    transform: rotate(180deg);

    &:before {
      transform: scale(1);
    }
  }

  .hamburge.hamburge-open span:nth-child(1) {
    width: .6rem;
    transform: translate3d(.45rem, .1rem, 0) rotate(45deg);
  }

  .hamburge.hamburge-open span:nth-child(2) {
    border-radius: .2em;
  }

  .hamburge.hamburge-open span:nth-child(3) {
    width: .6rem;
    transform: translate3d(.45rem, -.1rem, 0) rotate(-45deg);
  }
}

